<template>
  <div v-bind="$attrs" :style="{ height: height, width: width }" ref="chartContainer"/>
</template>

<script>
import * as echarts from 'echarts'
import _ from 'lodash'

export default {
  name: 'y-echart',
  props: {
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
    //配置项
    options: {
      type: Object,
      default: () => ({}),
    },
    type: {
      type: String,
      default: 'line'
    },
    // x轴数据
    xData: {
      type: Array,
      default: () => []
    },
    // series数据
    series: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      dataIndex: undefined,
      length: 0,
    }
  },
  computed: {
    opt() {
      return this.typeOptions(this.type)
    }
  },
  watch: {
    options: {
      handler(options) {
        this.chart.setOption(this.opt, true)
      },
      deep: true,
    },
    xData: {
      handler(xData) {
        this.chart.setOption(this.opt, true)
      },
      deep: true,
    },
    series: {
      handler(series) {
        this.chart.setOption(this.opt, true)
      },
      deep: true,
    },
    length(length) {
      if (length > 0) {
        this.autoToggle()
      }
    },
    width(width) {
      this.initChart()
      this.$nextTick(() => {
        window.addEventListener('resize', _.debounce(() => {
          this.resize()
        }, 1000), false)
        // 初始时调整大小
        this.resize()
      })
    },
    height(height) {
      this.initChart()
      this.$nextTick(() => {
        window.addEventListener('resize', _.debounce(() => {
          this.resize()
        }, 1000), false)
        // 初始时调整大小
        this.resize()
      })
    }
  },
  mounted() {
    this.initChart()
    this.$nextTick(() => {
      window.addEventListener('resize', _.debounce(() => {
        this.resize()
      }, 1000), false)
      // 初始时调整大小
      this.resize()
    })
  },
  activated() {
    this.resize()
  },
  beforeDestroy() {
    if (this.chart && this.chart.timeInterval) {
      clearInterval(this.chart.timeInterval)
    }
    this.chart.dispose()
    this.chart = null
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    typeOptions(type) {
      switch (type) {
        case 'line':
          this.length = this.xData.length
          return {
            ...this.options,
            legend: {
              ...this.options.legend,
              data: this.series.map(item => item.name)
            },
            xAxis: {
              type: 'category',
              data: this.xData || [], // 确保 xData 不为空
            },
            series: this.series
          }
          break
        case 'pie':
          this.length = this.series.length
          return {
            ...this.options,
            series: this.series
          }
          break
        case 'column':
          this.length = this.xData.length
          return {
            ...this.options,
            legend: {
              ...this.options.legend,
              data: this.series.map(item => item.name)
            },
            xAxis: {
              type: 'category',
              data: this.xData || [], // 确保 xData 不为空
            },
            series: this.series
          }
          break
        default:
          return {}
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer)
      console.log('this.opt', this.opt)
      this.chart.setOption(this.opt, true)
      if (this.length > 0) {
        this.autoToggle()
      }
    },
    autoToggle() {
      this.chart.on('mouseover', e => {
        clearInterval(this.chart.timeInterval)
        this.chart.dispatchAction({type: 'downplay', seriesIndex: 0})
        this.highlight(e.dataIndex)
      })
      this.timerFun(this.chart, this.length)
      this.chart.on('mouseout', () => {
        this.timerFun(this.chart, this.length)
      })
    },
    resize() {
      this.chart && this.chart.resize()
    },
    highlight(dataIndex) {
      this.dataIndex = dataIndex
      this.chart.dispatchAction({type: 'highlight', dataIndex})
      this.chart.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex})
    },
    timerFun(chart, len) {
      if (len <= 1) return
      if (chart.timeInterval) clearInterval(chart.timeInterval)
      chart.timeInterval = setInterval(() => {
        chart.dispatchAction({type: 'downplay', seriesIndex: 0})
        this.dataIndex = (this.dataIndex + 1) % len || 0
        this.highlight(this.dataIndex)
      }, 1500)
    },
  },
}
</script>
<style scoped></style>
